<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			html,
			body {
				height: 100%;
			}
			table {
				margin: 0 auto;
			}
			.modal {
				display: none;
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.4);
			}
			.modal .form {
				width: 400px;
				height: 300px;
				background-color: #fff;
				margin: 100px auto;
			}
		</style>
	</head>
	<body>
		<!-- table  tr  td  -->
		<table border="1" cellpadding="10">
			<!-- <tr>
				<th>用户名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr> -->
			<!-- <tr>
				<td>张三</td>
				<td>24</td>
				<td>男</td>
				<td><button>编辑</button><button>删除</button></td>
			</tr> -->
			<!-- 表格数据的渲染,,向服务器 请求用户数据,用拿到的数据取 渲染这个表格 -->
			<!-- 动态生成 -->
		</table>
		<button class="add">新增</button>

		<div class="modal">
			<div class="form">
				用户名: <input class="user" type="text" /> <br />
				年龄: <input class="age" type="text" /> <br />
				性别: 男: <input class="men" checked type="radio" name="sex" /> 女:
				<input class="women" type="radio" name="sex" />
				<br />
				<button class="save">确定</button> <button class="cancel" onclick="cancel()">取消</button>
			</div>
		</div>
		<!-- 第一步:  动态渲染表格 -->
		<!-- 第二部:  新增数据 -->
		<!-- 第四部: 删除数据 -->
		<!-- 第三部:  编辑数据 -->

		<script src="js/jquery-3.4.1.min.js"></script>
		<script>
			var users = [
				{
					name: "张三",
					age: 24,
					sex: "男",
				},
				{
					name: "李四",
					age: 30,
					sex: "男",
				},
				{
					name: "王五",
					age: 32,
					sex: "男",
				},
				{
					name: "赵六",
					age: 21,
					sex: "男",
				},
				{
					name: "小红",
					age: 21,
					sex: "女",
				},
			];

			initTable($("table"), users);
			var isEdit;
			var $currentTr;
			// 新增事件
			$(".add").click(function () {
				$(".modal").show(400);
				isEdit = false;
			});

			// 保存事件
			$(".save").click(function () {
				// 两套逻辑 isEdit  true  编辑  false  新增
				// 1, 获取表单中 填写的数据
				var username = $(".user").val();
				var age = $(".age").val();
				var sex = $(".men").prop("checked") ? "男" : "女";
				console.log(username, sex, age);
				if (isEdit) {
					//    编辑  修改 参与编辑的 那一行 tr
					$currentTr.children().eq(0).text(username);
					$currentTr.children().eq(1).text(age);
					$currentTr.children().eq(2).text(sex);
				} else {
					// 2, 拼接 tr  节点,加入到表格当中

					$("table").append(
						"<tr><td>" +
							username +
							"</td><td>" +
							age +
							"</td><td>" +
							sex +
							"</td><td><button class='edit' onclick='edit(this)'>编辑</button><button class='del' onclick='del(this)'>删除</button></td></tr>",
					);
				}

				cancel();
			});

			// 删除功能
			// 事件代理
			// $("table").on("click", ".del", function () {
			// 	console.log(this);
			// 	$(this).parent().parent().remove();
			// });
			function del(obj) {
				$(obj).parent().parent().remove();
			}

			// 编辑功能
			function edit(obj) {
				// 打开弹窗
				$(".modal").show(400);
				isEdit = true;
				// 填充数据
				// 传this 就是为了获取 这一行的数据
				$currentTr = $(obj).parent().parent();
				var user = $currentTr.children().eq(0).text();
				var age = $currentTr.children().eq(1).text();
				var sex = $currentTr.children().eq(2).text();
				// 填充
				$(".user").val(user);
				$(".age").val(age);
				if (sex === "男") {
					$(".men").prop("checked", true);
				} else if (sex === "女") {
					$(".women").prop("checked", true);
				} else {
					$(".women").prop("checked", false);
					$(".men").prop("checked", false);
				}
			}

			function cancel() {
				$(".modal").hide(400);
				// 清空表单
				$(".user").val("");
				$(".age").val("");
				$(".men").prop("checked", true);
			}

			function initTable($el, arr) {
				var str = "<tr><th>用户名</th><th>年龄</th><th>性别</th><th>操作</th></tr>";
				for (var i = 0; i < arr.length; i++) {
					str +=
						"<tr><td>" +
						arr[i].name +
						"</td><td>" +
						arr[i].age +
						"</td><td>" +
						arr[i].sex +
						"</td><td><button class='edit' onclick='edit(this)'>编辑</button><button class='del' onclick='del(this)'>删除</button></td></tr>";
				}
				$el.html(str);
			}
		</script>
	</body>
</html>
